import React ,{Suspense} from 'react'
import { BrowserRouter ,Route ,Routes ,Navigate } from 'react-router-dom';
import routers from './RouteConifig';

interface ROUTETYPE {
    path:string;
    to?:string;
    element?:any;
    txt?:string;
    icon?:any;
    children?:ROUTETYPE[];
}
function RouteView() {
    const renderRoute = (arr:ROUTETYPE[])=>{
        return arr.map((item,index)=>{
            return <Route key={index} path={item.path} element={item.to ? <Navigate to={item.to}/> : <item.element />}>
                {item.children && renderRoute(item.children)}
            </Route>
        })
    }
    return (
        <Suspense>
            <BrowserRouter>
                <Routes>
                    {renderRoute(routers)}
                </Routes>
            </BrowserRouter>
        </Suspense>
    )
}

export default RouteView